<script setup lang="ts">
import type { Node as N } from '../type';
import Add from '../Add.vue';
import Del from '../Del.vue';

const props = defineProps<{
  data: N;
}>();
const emit = defineEmits(['click', 'addNode', 'delNode']);
</script>

<template>
  <div class="lg-node lg-service" :class="`lg-status-${data.status}`">
    <div class="lg-node-box lg-service-box" @click="emit('click', data)">
      <slot v-bind="data">
        <div class="lg-name">{{ data.name }}</div>
        <div class="lg-content">
          <slot v-bind="data">{{ data.description }}</slot>
        </div>
      </slot>
      <Del @click.stop="emit('delNode', data)" />
    </div>
    <div class="lg-line-vertical">
      <add class="lg-add-node" @click="emit('addNode', { $event, data })" />
    </div>
  </div>
</template>

<style scoped lang="less">
.lg-service {
  .lg-service-box {

  }
}
</style>
